<template>
	<div class="padding-container">
		<!-- 搜索栏 -->
		<el-card class="search">
			<!-- 使用el布局 -->
			<el-row>
				<!-- 左侧搜索信息占80% -->
				<el-col :span="20">
					<el-col :span="8">
						<div class="search_grop">
							<el-select v-model="searchModel.product.status" clearable placeholder="周边状态" size="medium">
								<el-option v-for="item in statusList" :key="item.id" :label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="search_grop">
							<el-select v-model="searchModel.product.categoryId" clearable placeholder="周边类型"
								size="medium">
								<el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="search_grop">
							<div class="search_grop">
								<el-select v-model="searchModel.product.quantity" clearable placeholder="周边上架量"
									size="medium">
									<el-option v-for="item in listingsList" :key="item.num" :label="item.name"
										:value="item.num">
									</el-option>
								</el-select>
							</div>
						</div>
					</el-col>
				</el-col>
				<!-- 左侧搜索栏按钮占20% -->
				<el-col :span="4">
					<el-col :span="12">
						<div>
							<el-button type="primary" v-waves plain size="medium" @click="search">搜索</el-button>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-button type="success" plain size="medium" @click="openEdit(null)">添加</el-button>
						</div>
					</el-col>
				</el-col>
			</el-row>
		</el-card>
		<!-- 显示栏 -->
		<el-card class="tables">
			<el-table height="430" :data="tableData" style="width: 100%" v-loading="tableLoading">
				<el-table-column prop="peripheryId" label="周边ID" width="80">
				</el-table-column>
				<el-table-column prop="scenicId" label="所属景区" width="80" align="center">
				</el-table-column>
				<el-table-column prop="name" label="周边名称" width="80" align="center">
				</el-table-column>
				<el-table-column prop="description" label="周边描述" width="120" align="center">
				</el-table-column>
				<el-table-column prop="price" label="周边价格" width="80" align="center">
				</el-table-column>
				<el-table-column prop="imgUrl" label="周边图片" width="120" align="center">
				</el-table-column>
				<el-table-column prop="categoryId" label="周边类型" width="80" align="center">
				</el-table-column>
				<el-table-column prop="quantity" label="周边库存" width="80" align="center">
				</el-table-column>
				<el-table-column prop="status" label="周边状态" width="80" align="center">
				</el-table-column>
				<el-table-column prop="listings" label="周边上架量" width="90" align="center">
				</el-table-column>
				<el-table-column prop="createBy" label="创建者" width="100" align="center">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="100" align="center">
				</el-table-column>
				<el-table-column prop="updateBy" label="更新者" width="100" align="center">
				</el-table-column>
				<el-table-column prop="updateTime" label="更新时间" width="100" align="center">
				</el-table-column>
				<el-table-column align="center">
					<template slot="header" slot-scope="scope">
						操作
					</template>
					<template slot-scope="scope">
						<el-button type="primary" plain size="mini" @click="openEdit(scope.$index)">修改</el-button>
						<!-- <el-button type="primary" plain size="mini" @click="">上架</el-button> -->
					</template>

				</el-table-column>
			</el-table>
		</el-card>
		<!-- 分页 -->
		<div class="page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="searchModel.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="searchModel.pageSize"
				:pager-count="11" layout="total, sizes, prev, pager, next, jumper" :total="total" align="center"
				background>
			</el-pagination>
		</div>
		<!-- 弹出框 -->
		<el-dialog v-el-drag :title="dialogTitle" :visible.sync="dialogVisible" width="60%" @close="handleClose">
			<!-- 弹出框详细内容 -->
			<h2>周边信息</h2>
			<el-form ref="product" :rules="rules" :model="product" label-width="80px" size="mini">
				<el-form-item label="景区ID" prop="scenicId" >
					<el-input v-model="product.scenicId" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="周边名称" prop="name">
					<el-input v-model="product.name" ></el-input>
				</el-form-item>
				<el-form-item label="周边描述" prop="description">
					<el-input v-model="product.description" type="textarea"></el-input>
				</el-form-item>
				<el-form-item label="周边价格" prop="price">
					<el-input v-model="product.price"></el-input>
				</el-form-item>
				<el-form-item label="周边图片" prop="imgUrl">
					<el-upload v-model="product.imgUrl" class="upload-demo"
						action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
						:on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1"
						:on-exceed="handleExceed" :file-list="fileList">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="周边类型" prop="categoryId" >
					<el-select v-model="product.categoryId" placeholder="请选择周边类型" >
						<el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="库存量" prop="quantity">
					<el-input v-model="product.quantity"></el-input>
				</el-form-item>
				<el-form-item label="周边状态" prop="status">
					<el-select v-model="product.status" placeholder="请选择周边状态">
						<el-option v-for="item in statusList" :key="item.id" :label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上架量" prop="listings">
					<el-input v-model="product.listings"></el-input>
				</el-form-item>
			</el-form>
			<!-- 弹出框尾部插槽 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('product')" :loading="btnLoading" formnovalidate>确
					定</el-button>
			</span>
		</el-dialog>
	</div>
</template>


<script>
	import waves from "@/directives/waves/index.js"
	import ElDrag from "@/directives/ElDrag/index.js"
	import {
		list,
		category,
		search,
		insert,
		update
	} from "@/api/product/product"
	export default {
		directives: {
			waves,
			ElDrag
		},
		data() {
			return {
				// 表格加载
				tableLoading: true,
				// 按钮加载
				btnLoading: false,
				// 搜索条件 + 页数 + 每页显示条目数 ，前端发起请求可以直接传入 searchModel 对象
				searchModel: {
					pageNum: 1,
					pageSize: 10,
					product: {
						status: null,
						categoryId: null,
						quantity: null
					}
				},
				// 弹出窗标题
				dialogTitle: '',
				// 弹出窗显示
				dialogVisible: false,
				// 输入框禁用
				isDisabled: false,
				// 添加 点击的
				// 总条数
				total: null,
				// 表单数据
				form: {},
				// 列表数据
				// 周边类型
				list: [
					// {
					// 	id: 1,
					// 	name: '门票'
					// },
					// {
					// 	id: 2,
					// 	name: '周边'
					// }
				],
				// 周边状态
				statusList: [{
						id: 0,
						name: '未定义'
					},
					{
						id: 1,
						name: '上架'
					},
					{
						id: 2,
						name: '下架'
					}
				],
				// 周边上架量
				listingsList: [{
						id: 1,
						name: '库存充足',
						num: 100
					},
					{
						id: 2,
						name: '库存即将不足',
						num: 10
					},
					{
						id: 3,
						name: '库存不足',
						num: 0
					},
				],
				// 表格数据
				tableData: [],
				// value: '',
				// searchTime: [],
				// 周边对象
				product: {
					peripheryId: null,
					scenicId: null,
					name: '',
					description: '',
					price: null,
					imgUrl: '',
					categoryId: null,
					quantity: null,
					status: null,
					listings: null
				},
				//表单判定规则
				rules: {
					scenicId: [{
						required: true,
						message: '请填写景区Id',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请填写周边名称',
						trigger: 'blur'
					}],
					description: [{
						required: true,
						message: '请填写周边描述',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '请填写周边价格',
						trigger: 'blur'
					}],
					imgUrl: [{
						required: false,
						message: '请上传周边图片',
						trigger: 'blur'
					}],
					categoryId: [{
						required: true,
						message: '请选择周边类型',
						trigger: 'change'
					}],
					quantity: [{
						required: true,
						message: '请填写周边库存量',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '请选择周边状态',
						trigger: 'change'
					}],
					listings: [{
						required: false,
						message: '请填写周边上架量',
						trigger: 'blur'
					}]
				},
				// 上传文件列表
				fileList: []
			}
		},
		created() {
			//获取周边列表
			this.getList()
			//获取周边类型
			this.getCategory()
		},
		methods: {
			// 弹窗关闭触发
			handleClose() {
				console.log("关闭了");
			},
			handleSizeChange(val) {
				this.searchModel.pageSize = val;
				this.getList(this.searchModel)
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.searchModel.pageNum = val
				this.getList(this.searchModel)
				console.log(`当前页: ${val}`);
			},
			// 搜索
			search() {
				console.log("这是搜索方法");
				// 获取搜索框的内容
				const productVo = {
					peripheryId:null,
					status: null,
					categoryId: null,
					quantity: null,
					pageNum: 1,
					pageSize: 5
				}
				// 周边状态 周边类型 周边数量
				productVo.status = this.searchModel.product.status * 1
				productVo.categoryId = this.searchModel.product.categoryId * 1
				productVo.quantity = this.searchModel.product.quantity * 1
				console.log("productVo" + JSON.stringify(productVo))
				if (productVo.status || productVo.categoryId || productVo.quantity) {
					console.log("传过去的数据：",JSON.stringify(productVo));
					console.log("productVo",productVo)
					search(productVo).then(res => {
						console.log("返回的数据：",res)
						// console.log("返回的数据：",res.data)
						this.tableData = res.rows
						this.total = res.total
					})
				} else {
					this.getList()
				}
			},
			// 添加和修改都走这里
			openEdit(index) {
				console.log("index" + index)
				if (index != null) {
					//获取当前行的订单数据
					this.product = this.tableData[index];
					this.dialogTitle = '修改' // 修改
					console.log("修改")
					this.isDisabled = true
				} else {
					this.product = {};
					this.dialogTitle = '添加' // 添加
					console.log("添加")
					this.isDisabled = false
				}
				this.dialogVisible = true;
			},
			toggleStatus() {
				console.log("进行修改");
			},
			//日期格式转换 yyyy-mm-dd hh:mm:ss
			// formatDate(date) {
			// 	const formattedDate = new Date(date).toISOString().slice(0, 19).replace('T', ' ');
			// 	return formattedDate;
			// },
			//获取周边列表
			getList(data) {
				list(data).then(res => {
					if (res) {
						this.tableLoading = false
					}
					console.log(res)
					this.tableData = res.rows
					this.total = res.total
				})
			},
			//获取周边类型
			getCategory(){
				category().then(res =>{
					// console.log(res.rows)
					var optionsList = [];
					res.rows.forEach(function(item) {
					    var option = {
					        id: item.categoryId,
					        name: item.categoryName
					    };
					    optionsList.push(option);
					});
					// console.log(optionsList)
					this.list = optionsList
				})
			},
			//提交表单
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log("提交表单")
						// 转换类型
						const ProductForm = {
							peripheryId: this.product.peripheryId * 1,
							scenicId: this.product.scenicId * 1,
							name: this.product.name,
							description: this.product.description,
							price: this.product.price * 1,
							imgUrl: "img",
							categoryId: this.product.categoryId * 1,
							quantity: this.product.quantity * 1,
							status: this.product.status * 1,
							listings: this.product.listings * 1
						};
						console.log("前端的数据：" + JSON.stringify(ProductForm));
						if (this.dialogTitle === '修改') {
							//更新
							update(ProductForm).then(res => {
								console.log("更新周边信息")
								console.log(res)
								//关闭弹窗
								this.dialogVisible = false;
								//更新列表
								this.getList()
							})
						} else {
							//添加
							insert(ProductForm).then(res => {
								console.log("添加周边")
								console.log("添加返回的结果：" + res)
								//关闭弹窗
								this.dialogVisible = false;
								//更新列表
								this.getList()
							})
						}

					} else {
						console.log('error submit!!');
						// this.resetForm(this.searchModel.order)
						return false;
					}
				});
			},
			//重置表单
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			//图片上传
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			}
		}
	}
</script>

<style scoped>
	.dialog-goods-form .title {
		display: inline-block;
		margin-bottom: 15px;
		font-size: 18px;
	}

	.dialog-goods-form .el-input {
		width: 400px;
	}

	.dialog-goods-form .el-select {
		width: 400px;
	}

	.dialog-goods-list {
		height: 350px;
		overflow-y: auto;
	}

	.el-range-editor.el-input__inner {
		top: 10px;
		height: 36px;
	}

	.el-input-add {
		width: 300px;
		/* display: block; */
	}
</style>